<template>

    <form class="mui-input-group">
  
      <div class="mui-input-row">
  
        <label class="tit">收件人</label>
  
        <input v-model="form.name" type="text" class="mui-input-clear" placeholder="请输入收件人姓名">
  
      </div>
  
      <div class="mui-input-row">
  
        <label class="tit">联系方式</label>
  
        <input v-model="form.tel" type="text" class="mui-input-clear" placeholder="请输入手机号">
  
      </div>
  
      <div class="mui-input-row">
  
        <label class="tit">所在地区</label>
  
        <input v-model="form.area" type="text" class="mui-input-clear" placeholder="所在地区" @click="choose">
        <div class="divwrap">

            <div class="mask" @click="choose" v-show="show"></div>
          
            <v-distpicker
          
              v-show="show"
          
              type="mobile"
          
              @province="onChangeProvince"
          
              @city="onChangeCity"
          
              @area="onChangeArea"
          
              :province="newInfo.province"
          
              :city="newInfo.city"
          
              :area="newInfo.district"
          
            >
          
            </v-distpicker>
          
          </div>
  
      </div>
  
      <div class="mui-input-row">
  
        <label class="tit">详细地址</label>
  
        <input v-model="form.detail" type="text" class="mui-input-clear" placeholder="请输入详细地址">
  
      </div>
  
      <div class="mui-button-row">
  
        <button @click="save" type="button" class="mui-btn mui-btn-primary mui-btn-block">确认</button>
        <button v-show="id" @click="del" type="button" class="mui-btn mui-btn-danger mui-btn-block">删除</button>
  
      </div>
  
    </form>
  
  </template>
  <script>
  import VDistpicker from 'v-distpicker'

  export default {
    props: ['id'],

created () {

  this.getAddress()

},
    components: {

    'v-distpicker': VDistpicker

},

  data () {

    return {

      form: {

        name: '',

        tel: '',

        area: '',

        detail: ''

        },
        show: false,     // 是否显示遮罩层

    newInfo: {

    province: '', // 省

    city: '',     // 市

    area: '',     // 区

}

    }

  },

  methods: {
    save () {

this.$indicator.open({

  text: '提交中'

})
this.form.id = this.id

this.$http.post('address/save', this.form).then(res => {

this.$indicator.close()

if (res.data.code === 0) {

  this.$toast(res.data.msg)

} else if (res.data.code === 1) {

  this.$toast(res.data.msg)

  this.$router.go(-1)

} else if (res.data.code === 2) {

  this.$router.push({ name: 'login' })

}

})

},
   
      choose () {

this.show = !this.show

},

onChangeProvince (data) {

this.newInfo.province = data.value

},

onChangeCity (data) {

this.newInfo.city = data.value

},

onChangeArea (data) {

this.newInfo.area = data.value

this.form.area = this.newInfo.province + '-' + this.newInfo.city + '-' + this.newInfo.area

this.show = false

    },
    getAddress () {

if (!this.id) {

  return

}

this.$indicator.open({

  text: '加载中'

})

var params = { id: this.id }

this.$http.get('address/edit', { params: params }).then(res => {

  this.$indicator.close()

  window.console.log(res.data)

})

    },
    del () {

this.$indicator.open({

  text: '删除中'

})

this.form.id = this.id

this.$http.post('address/del', this.form).then(res => {

  this.$indicator.close()
  if (res.data.code === 0) {

this.$toast(res.data.msg)

} else if (res.data.code === 1) {

this.$toast(res.data.msg)

this.$router.go(-1)

} else if (res.data.code === 2) {

this.$router.push({ name: 'login' })

}

  window.console.log(res.data)

})

}

    }
   
}

</script>
<style lang="scss" scoped>

  .mui-input-group .mui-button-row {

    height: auto;

  }

  .mui-input-clear {

    font-size: 14px;

  }

  .mui-input-group:before {

    list-style: none;

  }

  .mui-button-row {

    margin-top: 20px;

    button {

      margin: 20px 0;

      padding: 10px 0;

    }

  }

  .tit {

    color: #999;

  }

  input::-webkit-input-placeholder {

    color: #999;

  }

  input::-moz-placeholder {   /* Mozilla Firefox 19+ */

    color: #999;

  }

  input:-moz-placeholder {    /* Mozilla Firefox 4 to 18 */

    color: #999;

  }

  input:-ms-input-placeholder {  /* Internet Explorer 10-11 */

    color: #999;

  }
  .divwrap > .mask {

    background: #000;
  
    opacity: 0.3;
  
    position: fixed;
  
    top: 0;
  
    bottom: 0;
  
    left: 0;
  
    right: 0;
  
  }
  
  .divwrap > .distpicker-address-wrapper {
  
    color: #999;
  
    background: #fff;
  
    border-top: 1px solid #ccc;
  
    z-index: 1;
  
    height: 300px;
  
    overflow-y: auto;
  
    position: fixed;
  
    left: 0;
  
    bottom: 0;
  
    width: 100%;
  
  }

</style>